import React from 'react';
import { Spin } from 'antd';
import { WorkflowStepsProps } from '../types';
import styles from './index.less';

const WorkflowSteps: React.FC<WorkflowStepsProps> = ({ 
  workflow, 
  loading 
}) => {
  return (
    <Spin spinning={loading}>
      <h3 className={styles['workflow-title']}>审批流程</h3>
      <div className={styles['workflow-steps']}>
        {workflow.map((step, index) => (
          <div key={index} className={styles['step']}>
            <div 
              className={`${styles['step-dot']} ${step.status === 'completed' ? styles['active'] : ''}`}
            />
            <div className={styles['step-content']}>
              <div className={styles['step-title']}>{step.step}</div>
              
              {step.handler && (
                <div className={styles['step-info']}>
                  <span className={styles['user-tag']}>{step.handler}</span>
                </div>
              )}
              
              {step.assistHandler && (
                <div className={styles['step-info']}>
                  <span className={styles['user-tag']}>{step.assistHandler}</span>
                </div>
              )}
              
              {step.handleTime && (
                <div className={styles['step-info']}>
                  处理时间: {step.handleTime}
                </div>
              )}
              
              {step.result && (
                <div className={styles['step-info']}>
                  【已处理】处理结果: <span className={styles['result-tag']}>{step.result}</span>
                </div>
              )}
              
              {step.status === 'pending' && !step.result && (
                <div className={styles['step-info']}>
                  待处理
                </div>
              )}
            </div>
          </div>
        ))}
      </div>
    </Spin>
  );
};

export default WorkflowSteps; 